<template>
  <div id="home">
    <!-- 首頁頭部 -->
    <HeaderTop>
      <p
        slot="center"
        class="header_p"
      >我的</p>
    </HeaderTop>
    <section class="home-number">
      <router-link to="/login">
        <div class="home_image">
          <i class="iconfont icon-wo"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top">{{username==null?loginMsg:username}}</p>
          <p>
            <span class="user-icon">
              <i class="iconfont icon-shouji icon-mobile"></i>
            </span>
            <span class="icon-mobile-number">{{userphone==null?phoneMsg:userphone}}</span>
          </p>
        </div>
      </router-link>
    </section>
    <section class="profile_info_data">
      <ul class="info_data_list">
        <a class="info_data_link">
          <span class="info_data_top"><span>{{userMoney==null?balance:userMoney.balance}}</span>元</span>
          <span class="info_data_bottom">我的余额</span>
        </a>
        <a class="info_data_link">
          <span class="info_data_top"><span>{{userMoney==null?specialOffer:userMoney.specialOffer}}</span>个</span>
          <span class="info_data_bottom">我的优惠</span>
        </a>
        <a class="info_data_link">
          <span class="info_data_top"><span>{{userMoney==null?integral:userMoney.integral}}</span>分</span>
          <span class="info_data_bottom">我的积分</span>
        </a>
      </ul>
    </section>
    <section class="profile_my_order">
      <!-- 我的订单 -->
      <a class="my_order">
        <span>
          <i class="iconfont icon-dd"></i>
        </span>
        <div class="my_order_div">
          <span>我的记录</span>
          <span class="my_order_icon">
            <i class="iconfont icon-fanhui2"></i>
          </span>
        </div>
      </a>
      <!-- 积分商城 -->
      <a class="my_order">
        <span>
          <i class="iconfont icon-jifen"></i>
        </span>
        <div class="my_order_div">
          <span>积分商城</span>
          <span class="my_order_icon">
            <i class="iconfont icon-fanhui2"></i>
          </span>
        </div>
      </a>
      <!-- 硅谷外卖会员卡 -->
      <a
        href="javascript:"
        class="my_order"
      >
        <span>
          <i class="iconfont icon-huiyuanqia"></i>
        </span>
        <div class="my_order_div">
          <span>会员卡</span>
          <span class="my_order_icon">
            <i class="iconfont icon-fanhui2"></i>
          </span>
        </div>
      </a>
    </section>
    <!-- 服务中心 -->
    <section class="profile_my_order">
      <!-- 服务中心 -->
      <a
        href="javascript:"
        class="my_order"
      >
        <span>
          <i class="iconfont icon-fuwuzhongxin"></i>
        </span>
        <div class="my_order_div">
          <span>服务中心</span>
          <span class="my_order_icon">
            <i class="iconfont icon-fanhui2"></i>
          </span>
        </div>
      </a>
    </section>
    <div
      class="exit"
      v-show="username!=null"
    >
      <button
        class="btn btn-info"
        @click="exit()"
      >退出登录</button>
    </div>
  </div>
</template>

<script>
import HeaderTop from '../../components/HeaderTop/HeaderTop.vue'
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      username: localStorage.getItem('username'),
      userphone: localStorage.getItem('usermobile'),
      loginMsg: '登录/注册',
      phoneMsg: '暂无绑定手机号',
      balance: '0.00',
      specialOffer: '0',
      integral: '0',
      userMoney: JSON.parse(localStorage.getItem('userMoney'))
    }
  },
  components: {
    HeaderTop
  },
  methods: {
    exit () {
      MessageBox.confirm('', {
        message: '确定退出？',
        title: '提示',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(action => {
        if (action === 'confirm') {
          localStorage.clear()
          this.username = null
          this.userphone = null
          this.userMoney = null
        }
      }).catch(err => {
        if (err === 'cancel') {
        }
      })
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
.header_p {
  text-align: center;
  background: #02a774;
  color: #fff;
  font-size: 22px;
  line-height: 45px;
  height: 45px;
}
.home-number {
  margin-top: 48px;
}
.home-number div {
  padding: 10px;
  height: 80px;
  background: #02a774;
  float: left;
}
.home_image {
  width: 30%;
}
.home_image .icon-wo {
  font-size: 60px;
  color: white;
  border-radius: 50%;
}
.user-info {
  width: 70%;
}
.user-info-top {
  font-size: 20px;
}
.user-info p {
  margin-left: -20px;
  color: white;
}
/* 余额，优惠，积分 */
.profile_info_data {
  position: relative;
  width: 100%;
  background: #fff;
  overflow: hidden;
}
.info_data_link {
  float: left;
  width: 33%;
  text-align: center;
  border-right: 1px solid #f1f1f1;
}
.info_data_top {
  display: block;
  width: 100%;
  font-size: 14px;
  color: #333;
  padding: 15px 5px 10px;
}
.info_data_bottom {
  display: inline-block;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  padding-bottom: 10px;
}
.info_data_link:nth-of-type(3) {
  border: 0;
}
.info_data_top span {
  display: inline-block;
  font-size: 30px;
  color: #f90;
  font-weight: 700;
  line-height: 30px;
}
.info_data_link:nth-of-type(2) .info_data_top span {
  color: #ff5f3e;
}
.info_data_link:nth-of-type(3) .info_data_top span {
  color: #6ac20b;
}

/* 订单，积分，会员 */
.profile_my_order {
  position: relative;
  margin-top: 10px;
  background: #fff;
}
.my_order {
  display: flex;
  align-items: center;
  padding-left: 15px;
}
.my_order > span {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
}
.my_order_div {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  padding: 18px 10px 18px 10px;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.iconfont {
  font-size: 24px;
}
.icon-dd {
  color: #02a774;
}
.icon-jifen {
  color: red;
}
.icon-huiyuanqia {
  color: orange;
}
.icon-fanhui2 {
  color: #c5bfbf;
  font-size: 20px;
}
/* 退出登录 */
.exit {
  width: 100%;
  background: white;
  text-align: center;
  padding-top: 30px;
}
</style>
